<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Document</title>
 </head>
<body>
    <div class="btns">
        <button data-path = "news">新闻</button>
        <button data-path = "play">娱乐</button>
        <button data-path = "game">游戏</button>
    </div>
    <div class="container"></div>
    <script>
        const oContainer = document.querySelector(".container")
        // 书写一个路由表，在实现路由的时候，按照这个路由表的映射关系决定
        const routes = [
            {path:"/news",content:"我是新闻模块"},
            {path:"/play",content:"我是娱乐模块"},
            {path:"/game",content:"我是游戏模块"}
        ]

        const oBtns = document.querySelectorAll(".btns button")
        // 给每一个导航绑定点击事件，可以根据导航上的属性，跳转到指定的hash地址
        for (var i = 0;i<oBtns.length;i++){
            oBtns[i].onclick = function(){
                location.hash = "#"+this.dataset.path;
            }
        }
        // 监听hash的改变，根据路由表加载对应的视图
        window.onhashchange = function (){
            routes.forEach((item)=>{
                if(item.path.slice(1) === location.hash.slice(1)){
                    oContainer.textContent = item.content
                }
            })
        }
    </script>
</body>
</html>